<template>
  <HandLoader v-if="showLoader" />
  <router-view v-else />
</template>

<script setup>
import { useRoute, onBeforeRouteUpdate } from 'vue-router'
import { watchEffect, onMounted, ref, watch } from 'vue'
import HandLoader from './components/HandLoader.vue'

const route = useRoute()
const showLoader = ref(false)

// 给 <body> 添加 layout 类名
function updateBodyClass(layout) {
  document.body.classList.remove('layout-login', 'layout-default')
  if (layout) {
    document.body.classList.add(`layout-${layout}`)
  }
}
watch(
  () => route.fullPath,
  () => {
    // 如果当前路由 meta 中声明了 showLoader，就显示加载动画
    if (route.meta.showLoader) {
      showLoader.value = true
      setTimeout(() => {
        showLoader.value = false
      }, 1500)
    }
  },
  { immediate: true }
)

onMounted(() => {
  updateBodyClass(route.meta.layout)
})

watchEffect(() => {
  updateBodyClass(route.meta.layout)
})
</script>
